<!--
 * @Description: 围栏配置
 * @Author: xuzp4
 * @Date: 2021-07-15 10:18:24
 * @LastEditors: xuzp4
 * @LastEditTime: 2021-09-24 14:13:13
 * @FilePath: \vue_demo\src\view\tupian\index.vue
-->

<template>
  <div class="parent">
    <div id="map"></div>
  </div>
</template>

<script>
import mapboxgl from "mapbox-gl";
import cehui from './assets/3.png'
function _getLngLat(poi){
    var lnglat = [];
    lnglat[0] = poi.x/20037508.34*180;
    var mmy = poi.y/20037508.34*180;
    lnglat[1] = 180/Math.PI*(2*Math.atan(Math.exp(mmy*Math.PI/180))-Math.PI/2);
    return lnglat;
}
export default {
  data() {
    return { area: "", init: true, index: 0};
  },
  mounted() {
    this.initLnglat();
    this.initMap();
    // var nullIsland = new mapboxgl.MercatorCoordinate(683695.3636 , 4764618.0998 , 0);
    // console.log('nullIsland',nullIsland.toLngLat())
    // var coord = mapboxgl.MercatorCoordinate.fromLngLat({ lng: 113, lat: 24}, 0);
    // console.log('coord',coord);
  },

  methods: {
    initMap() {
      let map;
      mapboxgl.accessToken =
        "pk.eyJ1IjoieHUwNDMwIiwiYSI6ImNrcHMzeGNhbDAzcHoyb280cmM1MGEzYXYifQ.uZFE2jGWs46691vFMwQLPA";
      this.map = map = new mapboxgl.Map({
        container: "map",
        style: "mapbox://styles/xu0430/ckqg0r0ng1kk217o6h54ontd1",
        zoom: 13,
        minZoom: 3,
        maxZoom: 19,
        center: [113.722, 24.552],
        // center: [6.15 , 39.28],
        // center: [-75.789, 41.874],
        doubleClickZoom: false,
        // dragRotate: false,
        	// pitchWithRotate: false
      });
      map.on("load",  () => {
        // ALL YOUR APPLICATION CODE
        map.addSource("radar", {
          type: "image",
          url: cehui,
          coordinates: [
            [113.68084201049968, 24.56933040149717],
            [113.7289522857692, 24.56796435322852],
            [113.72753607940842, 24.52962525239686],
            [113.68753752899418, 24.531264879005553]                                               
          ]
          // coordinates: this.lnglat
        });
        map.addLayer({
          id: "radar-layer",
          type: "raster",
          source: "radar",
          paint: {
            "raster-fade-duration": 0,
          },
        });
      });
    },
    initLnglat() {
      let arr = [
        {x:683695.3636, y:4764618.0998 ,Z: 0.0000},
        {x:686334.6464, y:4764618.0998 ,Z: 0.0000},
        {x:686334.6464, y:4761240.2084 ,Z: 0.0000},
        {x:683695.3636, y:4761240.2084 ,Z: 0.0000}
      ]
      this.lnglat = arr.map(poi => _getLngLat(poi))
    }
  },
};
</script>

<style>
.parent {
  width: 100%;
  height: 100%;
  color: #fff;
}
#map {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
}
</style>
